<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>发表评价晒单</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			.shaidan {
				height: 3.5rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.head-portrait img {
				width: 1.5rem;
				margin-right: 0.1rem;
			}

			.shaidan .icon-fav {
				width: 1rem;
				display: inline-block;
				margin-left: 0.3rem;
				vertical-align: middle;
			}

			textarea {
				height: 6rem;
				font-size: 0.7rem;
				/*color: #999999;*/
			}

			.aui-row img {
				border-radius: 0.25rem;
			}

			.aui-btn-block {
				height: 2.2rem;
		    line-height: 2.2rem;
		    font-size: 0.75rem;
		    color: #FFFFFF;
		    background: rgba(0,90,147,1);

			}

			.btn {
				/*background-color: #FFFFFF;*/
				padding: 0.55rem 0.5rem;
				width: 100%;
				position: fixed;
				bottom: 0;
			}
			.img{
				width: 3.65rem;
				height: 3.65rem;
				margin-top: 0.75rem;
				float: left;
				margin-right: 0.75rem;
			}
			.img_add{
				width: 3.65rem;
				height: 3.65rem;
				margin-top: 0.75rem;
				float: left;
			}
			.tips{
				margin-top: 2.2rem;
				margin-left: 0.5rem;
				float: left;
			}
			.text_area textarea::placeholder{color:#B3B3B3}
		</style>
	</head>

	<body>
		<div id="app" v-cloak="">
			<div class="" style="padding-bottom: 3.3rem;">
				<div v-for="(vo,index) in comment" class="ming-bg-white aui-padded-l-10 aui-padded-r-10 aui-margin-b-10" style="padding-bottom: 1.4rem;">
					<div class="shaidan aui-border-b">
						<div class="head-portrait">
							<img :src="vo.good_img" />
						</div>
						<div class="aui-text-left" style="flex: 1;">
							<img tapmode @click="vo.star_num=1" class="icon-fav" src="../../image/icon/stars1.png" />
							<img v-if="vo.star_num<2" tapmode @click="vo.star_num=2" class="icon-fav" src="../../image/icon/stars2.png" />
							<img v-if="vo.star_num>1" tapmode @click="vo.star_num=2" class="icon-fav" src="../../image/icon/stars1.png" />

							<img v-if="vo.star_num<3" tapmode @click="vo.star_num=3" class="icon-fav" src="../../image/icon/stars2.png" />
							<img v-if="vo.star_num>2" tapmode @click="vo.star_num=3" class="icon-fav" src="../../image/icon/stars1.png" />

							<img v-if="vo.star_num<4" tapmode @click="vo.star_num=4" class="icon-fav" src="../../image/icon/stars2.png" />
							<img v-if="vo.star_num>3" tapmode @click="vo.star_num=4" class="icon-fav" src="../../image/icon/stars1.png" />

							<img v-if="vo.star_num<5" tapmode @click="vo.star_num=5" class="icon-fav" src="../../image/icon/stars2.png" />
							<img v-if="vo.star_num>4" tapmode @click="vo.star_num=5" class="icon-fav" src="../../image/icon/stars1.png" />

							<span v-if="vo.star_num>3" class="aui-font-size-13" style="float:right;margin-top:0.25rem;color:#4D4D4D">非常好</span>
							<span v-if="vo.star_num>1&&vo.star_num<4" class="aui-font-size-13" style="float:right;margin-top:0.25rem;color:#4D4D4D">还不错</span>
							<span v-if="vo.star_num<2" class="aui-font-size-13" style="float:right;margin-top:0.25rem;color:#4D4D4D">很一般</span>
						</div>
					</div>
					<div class="aui-border-b aui-margin-t-15 text_area" style="position: relative;">
						<textarea maxlength="500" v-model="vo.content" placeholder="宝贝是否满足您的期待？说说您的使用心得分享给其他想购买的朋友吧。"></textarea>
						<div class="ming-text-hui" style="font-size: 0.6rem; position: absolute;right: 0;bottom: 0.5rem;padding-right:0.5rem;">
							{{vo.content.length}}/500
						</div>
					</div>
					<!-- <div class="aui-font-size-16" style="padding: 1rem 0;">

					</div> -->
					<div class="aui-row" style="overflow: inherit !important; ">
						<div v-for="(item,index1) in vo.imgpath" class="img" style="position: relative;">
							<img tapmode @click="vo.imgpath.splice(index1,1);vo.img.splice(index1,1)" style="width: 1.2rem;position:absolute;right:-0.4rem;top:-0.4rem;z-index: 22;" src="../../image/btn/btn-delete2.png" />
							<img :src="item" />
							
						</div>
						<div v-if="vo.imgpath.length<8" class="img_add" tapmode @click="upload_img(index)">
							<div class="" >
								<img src="../../image/icon/add_img.png" />
							</div>
						</div>
						<div class="tips" style="text-align:center;" v-if="vo.imgpath.length<6">
							  <div class="" style="font-size:0.6rem;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:rgba(179,179,179,1);">图片最多9张</div>
						</div>
						<div class="aui-clearfix"></div>
					</div>
				</div>
			</div>
			<div class="btn" tapmode onclick="sendGoodComment()">
				<div class="aui-btn aui-btn-block">
					提交评论
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				order_id: 0,
				comment: []
			},
			methods: {
				upload_img: function(index) {
					var index = index;
					console.log(JSON.stringify(vm.comment))
					select_pic(function(ret) {
						var pic_path = ret.data
						post_img('api/UpFiles/upload', pic_path, function(ret) {
							vm.comment[index].img.push(ret.data.pic_id);
							vm.comment[index].imgpath.push(ret.data.url);
						})
					})
				}
			}
		})
		apiready = function() {
			vm.order_id = $api.getStorage('id');
			vm.comment = $api.getStorage('comment');
			$api.rmStorage('comment')
		}

		function sendGoodComment() {
			var comment = JSON.parse(JSON.stringify(vm.comment));
			comment.forEach(function(el) {
				el.img = el.img.join(',')
				el.imgpath = el.imgpath.join(',')
			})
			get_data('api/Good/sendGoodComment', {
				token: $api.getStorage('token'),
				order_id: vm.order_id,
				comment: JSON.stringify(comment)
			}, function(ret) {
				toast(ret.msg)
				if(ret.status) {
					send_event('pingref')
//					toast提示：评价成功，同时跳转到评价成功页面，可点击查看我的评价
					send_event('order_chang')
					send_event('logined')
					open_win('evaluate','publish/evaluate.html',false)
					close_win()
				}else{
					send_event('pingref')
//					toast提示：评价失败，同时跳转到评价失败页面，可点击重新评价
					send_event('order_chang')
					send_event('logined')
					open_win('evaluate','publish/evaluate_failure.html',false)
					close_win()
				}
			})
		}
	</script>

</html>
